<template>
  <!--右侧卡片开始-->
  <div class="col-lg-4 mb-20">
      <div class="widget-area  right-card-container" >
          <div class="sidebar-widget widget-about mb-50 pt-30 pr-30 pb-30 pl-30 bg-white border-radius-5 has-border wow fadeInUp animated hover-up transition-normal">
             <div class="d-flex  justify-content-center align-items-center">
                <img class="about-author-img mb-25 mx-auto my-auto w-20 h-20"  :src="siteConfig.authorAvatar" alt="">
             </div>
              <h5 class="mb-20 text-center">{{siteConfig.siteAuthor}}</h5>
              <p class="font-medium text-muted text-center">  {{siteConfig.siteIntro}}</p>
                <div class="d-flex justify-content-center align-items-center" style="font-size:1.25rem">
                <div class="border-right pl-2 pr-2  d-flex flex-column align-items-center " @click="toArchive()">
                    <router-link to="/archive">{{categoryCount}}</router-link>
                       <h5 class="font-medium text-muted pt-1 mb-0">分类</h5>
                </div>
                <div class="border-right pl-2 pr-2 d-flex flex-column align-items-center " @click="toCategory()">
                    <router-link to="/category">{{tagCount}}</router-link>
                    <h5 class="font-medium pt-1 text-muted mb-0">标签</h5>
                </div>
                <div class="d-flex p-2 flex-column align-items-center" @click="toTag()">
                   <router-link to="/tag">{{articleCount}}</router-link>
                  <h5 class="font-medium pt-1 text-muted mb-0">文章</h5>
                </div>
                </div>
              <ul class="header-social-network d-inline-block list-inline color-white mb-20 d-flex  justify-content-center align-items-center">
                <li class="list-inline-item"><a :href="siteConfig.github" target="_blank" rel="noopener noreferrer" class="mt-1"><svg t="1693621639397" class="icon" viewBox="0 0 1049 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3472" width="25" height="25"><path d="M524.979332 0C234.676191 0 0 234.676191 0 524.979332c0 232.068678 150.366597 428.501342 358.967656 498.035028 26.075132 5.215026 35.636014-11.299224 35.636014-25.205961 0-12.168395-0.869171-53.888607-0.869171-97.347161-146.020741 31.290159-176.441729-62.580318-176.441729-62.580318-23.467619-60.841976-58.234462-76.487055-58.234463-76.487055-47.804409-32.15933 3.476684-32.15933 3.476685-32.15933 53.019436 3.476684 80.83291 53.888607 80.83291 53.888607 46.935238 79.963739 122.553122 57.365291 152.97411 43.458554 4.345855-33.897672 18.252593-57.365291 33.028501-70.402857-116.468925-12.168395-239.022047-57.365291-239.022047-259.012982 0-57.365291 20.860106-104.300529 53.888607-140.805715-5.215026-13.037566-23.467619-66.926173 5.215027-139.067372 0 0 44.327725-13.906737 144.282399 53.888607 41.720212-11.299224 86.917108-17.383422 131.244833-17.383422s89.524621 6.084198 131.244833 17.383422C756.178839 203.386032 800.506564 217.29277 800.506564 217.29277c28.682646 72.1412 10.430053 126.029806 5.215026 139.067372 33.897672 36.505185 53.888607 83.440424 53.888607 140.805715 0 201.64769-122.553122 245.975415-239.891218 259.012982 19.121764 16.514251 35.636014 47.804409 35.636015 97.347161 0 70.402857-0.869171 126.898978-0.869172 144.282399 0 13.906737 9.560882 30.420988 35.636015 25.205961 208.601059-69.533686 358.967656-265.96635 358.967655-498.035028C1049.958663 234.676191 814.413301 0 524.979332 0z" fill="#191717" p-id="3473"></path><path d="M199.040177 753.571326c-0.869171 2.607513-5.215026 3.476684-8.691711 1.738342s-6.084198-5.215026-4.345855-7.82254c0.869171-2.607513 5.215026-3.476684 8.691711-1.738342s5.215026 5.215026 4.345855 7.82254z m-6.953369-4.345856M219.900283 777.038945c-2.607513 2.607513-7.82254 0.869171-10.430053-2.607514-3.476684-3.476684-4.345855-8.691711-1.738342-11.299224 2.607513-2.607513 6.953369-0.869171 10.430053 2.607514 3.476684 4.345855 4.345855 9.560882 1.738342 11.299224z m-5.215026-5.215027M240.760389 807.459932c-3.476684 2.607513-8.691711 0-11.299224-4.345855-3.476684-4.345855-3.476684-10.430053 0-12.168395 3.476684-2.607513 8.691711 0 11.299224 4.345855 3.476684 4.345855 3.476684 9.560882 0 12.168395z m0 0M269.443034 837.011749c-2.607513 3.476684-8.691711 2.607513-13.906737-1.738342-4.345855-4.345855-6.084198-10.430053-2.607513-13.037566 2.607513-3.476684 8.691711-2.607513 13.906737 1.738342 4.345855 3.476684 5.215026 9.560882 2.607513 13.037566z m0 0M308.555733 853.526c-0.869171 4.345855-6.953369 6.084198-13.037566 4.345855-6.084198-1.738342-9.560882-6.953369-8.691711-10.430053 0.869171-4.345855 6.953369-6.084198 13.037566-4.345855 6.084198 1.738342 9.560882 6.084198 8.691711 10.430053z m0 0M351.145116 857.002684c0 4.345855-5.215026 7.82254-11.299224 7.82254-6.084198 0-11.299224-3.476684-11.299224-7.82254s5.215026-7.82254 11.299224-7.82254c6.084198 0 11.299224 3.476684 11.299224 7.82254z m0 0M391.126986 850.049315c0.869171 4.345855-3.476684 8.691711-9.560882 9.560882-6.084198 0.869171-11.299224-1.738342-12.168395-6.084197-0.869171-4.345855 3.476684-8.691711 9.560881-9.560882 6.084198-0.869171 11.299224 1.738342 12.168396 6.084197z m0 0" fill="#191717" p-id="3474"></path></svg></a></li>
                <li class="list-inline-item"><a :href="siteConfig.gitee" target="_blank" rel="noopener noreferrer" class="mt-1"><svg t="1693621678738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4490" width="25" height="25"><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="4491"></path></svg></a></li>
                <li class="list-inline-item"><a :href="siteConfig.bilibili" target="_blank" rel="noopener noreferrer" class="mt-1"><svg t="1694688034207" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9020" width="25" height="25"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FFFFFF" p-id="9021"></path><path d="M743.424 349.44H281.856A25.088 25.088 0 0 0 256 374.208v301.312c0 14.08 11.776 24.512 25.856 24.512h461.568c14.08 0 24.576-10.432 24.576-24.512V374.144a24 24 0 0 0-24.576-24.64zM320 460.8l119.04-24.512 8.96 48.064-117.76 24.512-10.24-48z m191.488 146.432c-30.976 42.88-63.488-13.504-63.488-13.504l16.512-13.568s22.08 50.624 46.72-16.448c23.68 65.152 49.792 17.088 49.792 17.408L576 593.408s-27.968 56.768-64.512 13.824z m182.592-98.368L576 484.352l9.28-48L704 460.8l-9.92 48.064zM512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0z m240.896 760.96c-32-1.024-42.752 0-42.752 0s-2.368 36.672-33.664 37.312c-31.616 0.32-36.352-25.6-37.376-35.328-19.2 0-249.728 1.024-249.728 1.024s-4.032 33.92-35.328 33.92c-31.68 0-33.344-28.16-35.392-33.92-20.48 0-48.128-0.64-48.128-0.64S201.216 748.8 192.128 658.56c1.024-90.24 0-268.672 0-268.672s-6.4-83.136 76.416-107.008A4914.56 4914.56 0 0 1 413.248 281.6l-58.88-57.216s-9.088-11.52 6.4-24.256c15.808-12.8 16.448-7.552 21.888-3.84 5.376 3.648 87.808 84.928 87.808 84.928h-11.072c31.616 0 64.256 0.512 95.616 0.512 12.096-12.096 81.088-79.68 85.76-83.008 5.44-3.392 6.4-9.088 21.952 3.712 15.424 12.8 6.4 24.32 6.4 24.32l-57.6 55.488 140.032 1.024s78.08 17.152 80.128 106.688A20278.4 20278.4 0 0 0 832 659.584s-4.352 87.552-79.104 101.312z" fill="#FB7299" p-id="9022"></path></svg></a></li>
              </ul>
          </div>
            <!--公告-->
          <div class="sidebar-widget widget-latest-posts mb-50 wow fadeInUp animated" >
              <div class="widget-header-1 position-relative mb-30">
                  <h5 class="mt-5 mb-30">🥳公告</h5>
              </div>
              <div class="post-block-list post-module-1">
                  <ul class="list-post">
                 <el-card shadow="never" class="hover-up transition-normal"> 
                    <p class="mb-0" v-html="siteConfig.siteNotice">
                    </p>
                 </el-card>
                  </ul>
              </div>
          </div>
          <!-- 最热文章 -->
          <div class="sidebar-widget widget-latest-posts mb-50 wow fadeInUp animated">
              <div class="widget-header-1 position-relative mb-30">
                  <h5 class="mt-5 mb-30">🔥热门文章</h5>
              </div>
              <div class="post-block-list post-module-1">
                  <ul class="list-post">
                      <li class="mb-30 wow fadeInUp animated" v-for="(article,index) in hotArticles" :key="article.id">
                          <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
                              <div class="post-content media-body">
                                  <h6 class="post-title mb-15 text-limit-2-row font-medium"><router-link :to="`/article/${article.id}`">{{article.articleTitle}}</router-link></h6>
                                  <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                      <span class="post-on">{{article.category.categoryName}}</span>
                                      <span class="post-by has-dot">{{article.articleViews}}次浏览量</span>
                                  </div>
                              </div>
                              <div class="post-thumb post-thumb-80 d-flex ml-15 border-radius-5 img-hover-scale overflow-hidden">
                                  <a class="color-white" href="single.html">
                                      <img :src="article.articleCover" alt="">
                                  </a>
                              </div>
                          </div>
                      </li>
                  </ul>
              </div>
          </div>

          <!-- 最新评论 -->
          <div class="sidebar-widget widget-latest-posts mb-50 wow fadeInUp animated">
              <div class="widget-header-1 position-relative mb-30">
                  <h5 class="mt-5 mb-30">💬最新评论</h5>
              </div>
            <div class="post-block-list post-module-1">
                  <ul class="list-post">
                      <li class="mb-30 wow fadeInUp animated" v-for="(comment,index) in comments" :key="comment.id">
                          <div class="d-flex bg-white has-border p-25 hover-up transition-normal border-radius-5">
                                      <div class="post-thumb post-thumb-80 d-flex mr-15 border-radius-5 img-hover-scale overflow-hidden">
                                  <!-- <a class="color-white" href="single.html"> -->
                                      <img :src="comment.avatar" alt="" style="border-radius:50%;width:75px;height:75px">
                                  <!-- </a> -->
                              </div>
                              <div class="post-content media-body">
                                  <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">{{comment.commentContent}}</a></h6>
                                  <div class="entry-meta meta-1 float-left font-x-small text-uppercase">
                                      <!-- <span class="post-on">{{comment.createTime}}</span> -->
                                       <h6 class="post-title mb-15 text-limit-2-row font-medium"><a href="single.html">{{comment.createTime}}</a></h6>
                                      <!-- <span class="post-by has-dot">{{comment.id}}次浏览量</span> -->
                                  </div>
                              </div>
                    
                          </div>
                      </li>
                  </ul>
              </div>
          </div>
      </div>
  </div>
  <!--右侧卡片结束-->
</template>

<script>
// import { site } from '@/api/site';
import {mapState} from 'vuex';
import {getRecentCommentList} from '@/api/article'
export default {
  name: 'RightCard',
  data() {
    return {
        hotArticles:[],
        comments:[],
    }
  },
  methods: {
    toArchive(){
        this.$router.push('/archive')
    },
    toCategory(){
        this.$router.push('/category')
    },
    toTag(){
        this.$router.push('/tag')
    },
    async getHotArticleList(){
        const res = await this.$API.article.getHotArticleList();
        if(res.code == 200)
        {
            this.hotArticles = res.data;
        }
        else{
            this.$message({
                type:'error',
                message:'获取热门文章失败！'
            })
        }
    },
    recentComment(){
        getRecentCommentList().then((res)=>{
            if(res.code == 200){
                this.comments = res.data;
            }
        })
    }
    // formatDate(dateTimeString) {
    //   const date = new Date(dateTimeString);
    //   return date.toISOString().split('T')[0];
    // },
  },
  computed: {
    ...mapState({
      "userInfo":state => state.user.userInfo,
      "siteConfig":state => state.site.site.siteConfig,
      "articleCount":state => state.site.site.articleCount,
      "categoryCount":state => state.site.site.categoryCount,
      "tagCount":state => state.site.site.tagCount,
      "tagCount":state => state.site.site.tagCount,
    }),
  },
  mounted() {
    this.getHotArticleList();
    if(this.$route.params.articleId != null)
    {
        this.$API.article.getRecentComment(this.$route.params.articleId).then((res)=>{
            if(res.code == 200){
                this.comments = res.data;
            }
        })
    }else
    {
        this.recentComment();
    }
    
  }
}
</script>

<style>
    h5:hover {
        cursor: pointer;
    }
    .post-module-1 .post-thumb {
         box-shadow: 0px 0px 0 var(--color-grey);
}

.right-card-container {
  position: -webkit-sticky; /* 兼容性前缀 */
  position: sticky;
  top: 70px; /* 当滚动到离顶部20像素的位置时停止滚动 */
}
</style>